<template>
  <div class="geEditor">
    <Content>
      <div id="graphContainer"></div>
    </Content>
    <!-- 添加设备信息弹层 -->
    <addDeviceDialog ref="addDeviceDialog1" :deviceData="sendDeviceInfoData" @submitDevice="getDevices_childChange"></addDeviceDialog>
    <!-- 添加设备类型弹层 -->
    <addTypeDialog ref="addTypeDialog1" :typeData="sendTypeData" @submit="get_childChange"></addTypeDialog>
  </div>
</template>

<script>
import addDeviceDialog from './addDeviceDialog.vue';
import addTypeDialog from './addTypeDialog.vue';
import './graph/Init';
import mxgraph from './graph/index';
import Toolbar from './graph/Toolbar';
import EditorUi from './graph/EditorUi';
import Editor from './graph/Editor';
import './graph/Shapes';
import UrlParams from './graph/UrlParams';
import { Menus } from './graph/Menus';
import grapheditorTxt from './resources/grapheditor.txt';
import defaultXml from './styles/default.xml';
import graphApi from '../../api/graph.api';
import mxFreehand from './graph/mxFreehand';

import { sendThis } from './graph/Actions.js';
import { _this } from './graph/Graph.js';
// console.log(sendThis(this), 'sendThis')

//定义变量接受后台返回数据
import deviceLayoutData from './resources/deviceLayout.json';

const {
  mxGraph,
  mxOutline,
  mxEvent,
  mxCell,
  mxClient,
  mxGeometry,
  mxUtils,
  mxEventObject,
  mxConnectionHandler,
  mxRubberband,
  mxToolbar,
  mxResources,
  mxCodec,
  mxCodecRegistry,
  MXUTILITIES,
} = mxgraph;

import { Graph } from './graph/Graph';
export default {
  name: 'Grapheditor',
  components: { addTypeDialog, addDeviceDialog },
  data() {
    return {
      returnAutoDrawData: null,
      sendTypeData: {},
      sendDeviceInfoData: {},
      child_devicesData: null, //赋值后传给父
      child_typeData: null, //赋值后传给父
      id: '',
      name: '',
      xml: '',
    };
  },
  computed: {},
  methods: {
    init() {
      let self = this;
      let editorUiInit = EditorUi.prototype.init;
      EditorUi.prototype.init = function() {
        editorUiInit.apply(this, arguments);
        // Updates action states which require a backend
        this.actions.get('open').setEnabled(true);
      };
      // Adds required resources (disables loading of fallback properties, this can only
      // be used if we know that all keys are defined in the language specific file)
      mxResources.loadDefaultBundle = false;
      mxResources.parse(grapheditorTxt);

      // Configures the default graph theme
      var themes = new Object();
      themes[Graph.prototype.defaultThemeName] = mxUtils.parseXml(defaultXml).documentElement;

      // Main
      let mEditorUi = new EditorUi(new Editor(UrlParams['chrome'] == '0', themes), document.getElementById('graphContainer'));
      let mGraph = mEditorUi.editor.graph;
      // console.log("接口返回的xml:",self.xml);

      if (self.xml) {
        mEditorUi.editor._id = self.id;
        mEditorUi.editor.filename = self.name;
        mGraph.getModel().beginUpdate();
        try {
          const doc = mxUtils.parseXml(self.xml);
          const root = doc.documentElement;
          const dec = new mxCodec(root.ownerDocument);
          let _xml = new mxCodec().encode(mGraph.getModel(), dec);
          dec.decode(root, mGraph.getModel()); //渲染图形
          // console.log("编辑渲染:", root, dec, mGraph.getModel(),_xml);
          //更新视图
          mGraph.refresh();
          // console.log(doc, dec, dec.decode(root, mGraph.getModel()), "doc");

          //去掉虚线的方法
          mEditorUi.setPageVisible(!mGraph.pageVisible);
        } finally {
          mGraph.getModel().endUpdate();
        }
      }
    },
    //绑定设备类型 子传父
    getDevices_childChange(val) {
      console.log('hahaha11:', val); //子组件传来的值
      this.$emit('transfer_device', val); //传给action.js
      if (val) {
        this.child_devicesData = val;
      }
    },

    // 添加设备类型 子传给父
    get_childChange(data) {
      console.log('hahaha:', data); //子组件传来的值
      this.$emit('transfer_type', data, deviceLayoutData); //传给action.js
      if (data) {
        this.child_typeData = data;
      }
    },
  },
  watch: {
    $route(to, from) {
      // 绑定xml 跳转
      console.log('to:', to);
      if (this.$route.params.hasOwnProperty('id')) {
        this.id = this.$route.params.id;
        graphApi.detail(this.id).then((res) => {
          let data = res.data.data;
          this.name = data.name;
          this.xml = data.xml;
          this.init();
        });
      } else {
        this.init();
      }
    },
  },
  created() {},
  mounted() {
    sendThis(this); //vue实例把this传过去
    _this(this);
    // this.modal1 = true; //打开弹层
    console.log('加载了编辑：', window.location.href);
    if (this.$route.params.hasOwnProperty('id')) {
      this.id = this.$route.params.id;
      graphApi.detail(this.id).then((res) => {
        let data = res.data.data;
        this.name = data.name;
        this.xml = data.xml;
        this.init();
      });
    } else {
      this.init();
    }

    //绑定设备信息的传值
    this.$on('watchForm_device', (data) => {
      console.log(data, '从action 传过来的 设备信息详情');
      this.sendDeviceInfoData = data;
    });

    //添加设备类型的传值
    this.$on('watchForm_type', (val) => {
      console.log(val, '从action 传过来的 设备类型详情');
      this.sendTypeData = val;
    });
  },
  beforeDestroy() {},
};
</script>
<style lang="scss" scoped>
.geEditor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: white;
}
</style>
<style scoped>
@import './styles/grapheditor.css';
</style>
